<template>
  <div class="BillRecharge-div">
    <div>
    <p>用户当前账户余额为：{{balance}}</p>

    <p>请输入要充值的余额</p>
    <el-input placeholder="请输入内容" v-model="recharge" clearable></el-input>
    <el-button type="primary" @click="userRecharge" class="change">确认充值</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      balance:'',
      recharge:'',
    }
  },

  methods: {
    async userRecharge(){
      const res = await this.$http.post('user/bigWallet',{
        type:"recharge",
        amount : this.recharge,
        userAccount : window.sessionStorage.getItem('userAccount'),
      })

      if(res.data.status === 0){
        this.$message({
          message:'充值成功',
          type : 'success'
        })

        const temp = +(this.balance) + +(this.recharge) 
        this.balance = temp
        this.recharge = ''
      }
    }
  },

  created:async function(){
    const res = await this.$http.post('user/userInfoQuery',{
      userAccount : window.sessionStorage.getItem('userAccount'),
    })

    this.balance = res.data.data.balance
  }
}
</script>

<style>
.BillRecharge-div{
  width: 80%;
  height: 80%;
  background-color: white;
  margin-left:120px;
  margin-top: 80px;

  opacity: 1;
  border-radius : 20px;
}

.BillRecharge-div>div{
   width: 500px;
  margin-left: 300px;
  padding-top:100px;
}

.BillRecharge-div>div>p{
  font-size: 20px;
  margin-top: 80px;
}
</style>